<template>
  <el-dialog v-model="dialog" @close="close" :append-to-body="true" width="660px" title="新建机会">
    <div class="opportunity-detail">
        <el-form ref="ruleRefForm" :model="form" :rules="rules" size="small" label-width="150px" class="opportunityForm">

<!--            <div v-for="(item, index) in form.product" :key="item.id" class="row-item">-->
<!--                <el-form-item :label="`机会${index + 1}`" prop="name">-->
<!--                    <el-input v-model="item.name" placeholder="请输入" style="width:200px"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="预估签约日期" prop="signDate">-->
<!--                    <el-date-picker v-model="item.signDate" type="date" placeholder="请选择" size="small" style="width:200px" />-->
<!--                </el-form-item>-->
<!--                <el-row style="margin-bottom:18px;">-->
<!--                    <el-col :span="12">-->
<!--                        <el-form-item label="预估销售金额" prop="predictionTotal">-->
<!--                            <el-input-number v-model="item.predictionTotal" :min="0" :step="0.01" />-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                    <el-col :span="12">-->
<!--                        <el-form-item label="实际销售金额" prop="actualTotal" style="align-items:flex-start;">-->
<!--                            <el-input-number v-model="item.actualTotal" :min="0" :step="0.01" />-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--                <el-form-item label="可能性" prop="possible">-->
<!--                    <el-input-number v-model="item.possible" :min="0" :step="0.01" />-->
<!--                </el-form-item>-->
<!--                <el-form-item label="显示选项" prop="visibleType">-->
<!--                    <el-checkbox v-model="item.followStage" label="跟进阶段" size="small"></el-checkbox>-->
<!--                    <el-checkbox v-model="item.orderStage" label="订单阶段" size="small" />-->
<!--                </el-form-item>-->
<!--                <el-divider v-if="index < form.product.length - 1" border-style="dotted" />-->
<!--            </div>-->

            <div class="row-item">
                <el-form-item label="产品线" prop="productLineId">
                    <el-select v-model="form.productLineId"
                               @change="selectProductLineEvent"
                               placeholder="请选择产品线"
                               size="small">
                        <template v-for="item in productLineList">
                            <el-option
                                v-if="item.visible === 0"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"/>
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item label="预估签约日期" prop="signDate">
                    <el-date-picker v-model="form.signDate"
                                    type="date"
                                    placeholder="请选择"
                                    :disabled-date="disabledDate"/>
                </el-form-item>
                <el-form-item label="预计签约金额(元)" prop="expectedSignAmount" >
                    <el-input-number v-model="form.signAmount"
                                     :min="0"
                                     :step="100"/>
                </el-form-item>
                <el-form-item label="签约可能性(%)" prop="probability" >
                    <el-input-number
                        v-model="form.probability"
                        :min="10"
                        :max="99"/>
                </el-form-item>
<!--                <el-form-item label="显示选项" prop="visibleType">-->
<!--                    <el-checkbox v-model="form.followStage" label="跟进阶段" size="small"></el-checkbox>-->
<!--                    <el-checkbox v-model="form.orderStage" label="订单阶段" size="small" />-->
<!--                </el-form-item>-->
                <el-form-item label="机会阶段" prop="stageId">
                    <el-select v-model="form.stageId"
                               @change="selectStageEvent"
                               placeholder="请选择阶段">
                        <el-option
                            v-for="item in stageList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                    <!-- <el-icon :size="16" style="margin-left:5px" color="var(--next-bg-topBarColor)"><ele-Setting /></el-icon> -->
                </el-form-item>
<!--                <el-divider v-if="index < form.length - 1" border-style="dotted" />-->
            </div>

        </el-form>
        <p ref="bottom"></p>
    </div>
      <template #footer>
          <div class="footer-fixed">
    <!--        <el-row align="middle" class="add-fixed" @click="addChance">-->
    <!--            <el-icon color="var(&#45;&#45;el-color-primary-dark-2)"><ele-Plus /></el-icon>-->
    <!--            <span class="add-tips">新增机会</span>-->
    <!--        </el-row>-->
            <el-row justify="center">
                <el-button type="primary" size="small" @click="submit(ruleRefForm)">提交</el-button>
                <el-button size="small" @click="cancel(ruleRefForm)">取消</el-button>
            </el-row>
        </div>
    </template>
  </el-dialog>
</template>

<script>
import { toRefs, computed, reactive, ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import {productLineCache} from "/@/stores/ums/customer/productLineStores";
import {storeToRefs} from "pinia";
import {stageStatusCache} from "/@/stores/ums/customer/stageStatusStores";
import {ElMessage} from "element-plus";
import opportunityApi from "/@/api/ums/customer/opportunity";
import customerDetailStores from "/@/stores/ums/customer/customerDetailStores";


export default {
    name: 'OpportunityCreate',
    props: {
        dialogPop: {
            type: Boolean,
            default: false
        }
    },
    setup(props, context) {
        const { memberId } = storeToRefs(customerDetailStores())
        const { list:productLineList } = storeToRefs(productLineCache())
        const { list:stageList } = storeToRefs(stageStatusCache())
        const { dialogPop } = toRefs(props)
        const dialog = computed({
            get: () => dialogPop.value,
            set: (val) => {
                context.emit('update:dialogPop', val)
            }
        })
        const state = reactive({
            form: {
                predictionTotal: 0,
                actualTotal: 0,
                possible: 0,

                productLineId: null,//
                productLineName: null,//
                stageListSort: null,//
                stageName: null,//
                stageId: null,//
                signAmount: null,//
                signDate: null,//
                probability: null,//

                followduStage: true,
                orderStage: true,
                // proct: [{
                //     predictionTotal: 0,
                //     actualTotal: 0,
                //     possible: 0,
                //     followStage: true,
                //     orderStage: true
                // }, {
                //     predictionTotal: 0,
                //     actualTotal: 0,
                //     possible: 0,
                //     followStage: true,
                //     orderStage: true
                // }]
            },
            rules: {
                productLineId: [{ required: true, trigger: 'blur', message: '请选择产品线'}],
                stageId: [{ required: true, trigger: 'blur', message: '请选择机会阶段'}]
            }
        })
        const ruleRefForm = ref()
        const bottom = ref()
        const close = () => {
            context.emit("update:dialogPop", false)
        }
        const submit = async (formEl) => {
            if (!formEl) return
            await formEl.validate( async (valid) => {
                if (!valid) return
                // 发起保存
                try {
                    state.form['memberId'] = memberId
                    const { data } = await opportunityApi.addOpportunity(state.form);
                    ElMessage.success(data)
                    // 刷新列表
                    customerDetailStores().loadOpportunityList()
                    context.emit('onSubmit', true)
                    context.emit("update:dialogPop", false)
                    // 清除
                    reset()
                }catch (e){
                    console.log('保存异常捕获\n',e);
                    ElMessage.error(e.message)
                }
            })
        }
        const cancel = async (formEl) => {
            context.emit("update:dialogPop", false)
            reset()
            if (!formEl) return
            formEl.resetFields()
        }
        const addChance = () => {
            state.form.product.push({
                predictionTotal: 0,
                actualTotal: 0,
                possible: 0,
                followStage: true,
                orderStage: true
            })
        }
        const disabledDate = (time) => {
            return time.getTime() <= (Date.now() - 8.64e7)
        }
        // 选中某个产品
        const selectProductLineEvent = e => {
            // 找出对象
            const obj = productLineList.value.find(f=>f.id === e)
            // 检查 - 回填
            if (obj){
                state.form['productLineName'] = obj.name
            }
        }
        // 选中某个阶段
        const selectStageEvent = e => {
            const obj = stageList.value.find(f=>f.id === e)
            if (obj){
                const {name, listSort} = obj
                state.form['stageName'] = name
                state.form['stageListSort'] = listSort
            }
        }
        const reset = ()=>{
            state.form = {
                predictionTotal: 0,
                actualTotal: 0,
                possible: 0,

                productLineId: null,//
                productLineName: null,//
                stageListSort: null,//
                stageName: null,//
                stageId: null,//
                signAmount: null,//
                signDate: null,//
                probability: null,//

                followduStage: true,
                orderStage: true,
                // proct: [{
                //     predictionTotal: 0,
                //     actualTotal: 0,
                //     possible: 0,
                //     followStage: true,
                //     orderStage: true
                // }, {
                //     predictionTotal: 0,
                //     actualTotal: 0,
                //     possible: 0,
                //     followStage: true,
                //     orderStage: true
                // }]
            }
        }
        return {
            dialog,
            ruleRefForm,
            close,
            submit,
            cancel,
            Plus,
            addChance,
            bottom,
            disabledDate,
            productLineList, // 产品线
            selectProductLineEvent,// 选中某个产品
            stageList,// 客户阶段
            selectStageEvent, // 选中某个阶段
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
.footer-fixed{
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 10px 0;
    background: #fff;
    z-index: 999;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    .add-fixed{
        padding-left: 20px;
        color: var(--el-color-primary);
        cursor: pointer;
        border-bottom: 1px dotted var(--el-border-color-light);
        padding-bottom: 10px;
        margin-bottom: 10px;
        .add-tips{
            margin-left: 5px;
            font-size: 13px;
        }
    }
}
.row-item{
    margin-bottom: 18px;
    &:last-child{
        margin-bottom: 0;
    }
}
.opportunityForm{
    padding-bottom: 80px;
}
</style>
